<template>
	<view class="steps">
		<view class="arrow" :style="{
				left: percent + '%'
			}">
			<u-icon name="arrow-down-fill" color="#d1d1d1"></u-icon>
		</view>
		<view class="flex align-center">
			<view class="step" v-for="(item, index) in steps" :style="{
					background: item.color
				}"></view>
		</view>
		<view class="flex align-center" v-if="size == 'lg'">
			<view class="step_text" v-for="(item, index) in steps" :style="{
					color: item.color
				}">
				{{ item.text }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dmSteps
	} from '@/utils/enum.js'
	export default {
		name: 'bpStep',
		props: {
			size: {
				type: String,
				default: 'default'
			},
			result: {
				type: Number,
				default: 5
			},

		},
		computed: {
			//计算血压等级 最高收缩压33.3，舒张压0
			percent() {
				let percent = 0,
					num = 0;
				if (this.result >= 10.0) {
					percent = (this.result - 10) / 23.3
					num = 2;
				} else if (this.result >= 4.4 || this.result <= 10) {
					percent = (this.result - 4.4) / 5.6
					num = 1;
				} else if (this.result < 4.4) {
					percent = 0.5;
					num = 0;
				}
				percent = (1 / 3) * (num + (percent > 1 ? 1 : percent));
				return percent * 100;
			}
		},
		data() {
			return {
				steps: dmSteps
			};
		}
	};
</script>

<style scoped lang="scss">
	.steps {
		position: relative;
		width: 100%;

		.arrow {
			position: absolute;
			top: -30upx;
			left: 0;
			transform: translateX(-50%);
		}

		.step {
			flex: 1;
			height: 10upx;

			border-radius: 50upx;

			&+.step {
				// margin-left: 2upx;
			}
		}

		.step_text {
			flex: 1;
			text-align: center;
			font-size: 20upx;
			margin-top: 10upx;

			&+.step_text {
				// margin-left: 2upx;
			}
		}
	}
</style>